import React, { useState }from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  Button,
  View
} from 'react-native';

export default class HelloWorld extends React.Component {
  state = { isHungry: true , text:""};

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>第二个页面,</Text>
        <TextInput
        style={{
          borderColor: 'gray',
          borderWidth: 1,
          width:200,
          height: 60,
      	  marginBottom:10}}
          placeholder="Type here to translate!"
          defaultValue="Name me!"
       />

       <Button
       
          color = {'#000000'}
       	  style={{fontSize: 24, color: 'green'}}
          containerStyle={{ padding: 10, height: 45, overflow: 'hidden', borderRadius: 4, backgroundColor: 'aqua' }}

          onPress={() => {
            this.setState({ isHungry: false });
          }}
          disabled={!this.state.isHungry}
          title={
            this.state.isHungry ? "8shhPour me some milk, please!" : "Thank you!"
          }
        />
        <Text style={{padding: 10, fontSize: 42}}>
            {this.state.text.split(' ')}
        </Text>

      </View>

    );
  }
}

class Cat extends React.Component {
  render() {
    return (<Text>Hello, I am your cat, my name is {this.props.name}!</Text>);
  }
}

const Dog = (n) => {
    return (
       <>
       <Text>Hello, I am your dog! {n.name}</Text>
       <Text>=========={getFullName("11", "22", "33")}</Text>
       </>
    );
}

const Fish = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    flexDirection:'column',
    justifyContent: 'flex-start'
  },
  hello: {
    fontSize: 20,
    textAlign: 'left',
    margin: 10
  },
  clickButtonStyle: {
       margin: 10,
 
       height: 40,
 
       backgroundColor: '#FF0000',
 
       borderRadius: 10,
       borderWidth: 1,
       borderColor: '#7FFF00',
   }
});